<style>
    :root {
        --primary: #3B82F6;
        --primary-light: #93C5FD;
        --primary-dark: #1E40AF;
        --secondary: #EC4899;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
        --light-bg: #F8FAFC;
        --card-bg: #FFFFFF;
        --text-primary: #1E293B;
        --text-secondary: #64748B;
        --border-light: #E2E8F0;
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --radius: 8px;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Inter', system-ui, sans-serif;
        background-color: var(--light-bg);
        color: var(--text-primary);
        line-height: 1.6;
    }

    .container {
        max-width: 1200px;
    }

    /* 导航路径 */
    .breadcrumb {
        margin: 1rem 0;
        background-color: transparent;
        padding: 0;
        font-size: 0.9rem;
    }

    .breadcrumb .breadcrumb-item a {
        color: var(--text-secondary);
        text-decoration: none;
    }

    .breadcrumb .breadcrumb-item a:hover {
        color: var(--primary);
    }

    .breadcrumb .breadcrumb-item.active {
        color: var(--text-primary);
    }

    /* 活动头部横幅 */
    .event-banner {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        border-radius: var(--radius);
        color: white;
        padding: 2.5rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .event-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .event-banner .event-banner-content {
        position: relative;
        z-index: 1;
    }

    .event-banner .event-status {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 1rem;
    }

    .event-banner .event-title {
        font-size: 2.25rem;
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    .event-banner .event-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .event-banner .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .event-banner .event-actions {
        display: flex;
        gap: 1rem;
    }

    /* 主内容区布局 */
    .content-container {
        display: flex;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .content-container .main-content {
        flex: 1;
    }

    .content-container .sidebar {
        width: 300px;
        flex-shrink: 0;
    }

    /* 活动详情卡片 */
    .event-card {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .event-card .card-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    .event-card .event-description {
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .event-card .event-description p {
        margin-bottom: 1rem;
    }

    .event-card .event-description h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 1.5rem 0 1rem;
    }

    .event-card .reward-list {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem 0;
    }

    .event-card .reward-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-light);
    }

    .event-card .reward-item:last-child {
        border-bottom: none;
    }

    .event-card .reward-rank {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--primary-light);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        flex-shrink: 0;
    }

    .event-card .reward-rank.first {
        background-color: var(--warning);
    }

    .event-card .reward-rank.second {
        background-color: #94A3B8;
    }

    .event-card .reward-rank.third {
        background-color: #D97706;
    }

    .event-card .reward-details {
        flex: 1;
    }

    .event-card .reward-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .event-card .reward-description {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 0;
    }

    /* 文章列表 */
    .articles-filter {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .articles-filter .filter-title {
        font-weight: 600;
        margin: 0;
    }

    .articles-filter .filter-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .articles-filter .view-controls {
        display: flex;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .articles-filter .view-btn {
        background-color: transparent;
        border: none;
        padding: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        transition: var(--transition);
        width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .articles-filter .view-btn:hover {
        background-color: var(--light-bg);
        color: var(--primary);
    }

    .articles-filter .view-btn.active {
        background-color: var(--primary);
        color: white;
    }

    .articles-filter .sort-select {
        padding: 0.5rem;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        background-color: var(--light-bg);
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .articles-filter .search-box {
        position: relative;
    }

    .articles-filter .search-input {
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        background-color: var(--light-bg);
        color: var(--text-primary);
        font-size: 0.9rem;
        width: 220px;
    }

    .articles-filter .search-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
    }

    /* 列表视图样式 */
    .articles-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .article-card.list-view {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: var(--transition);
        display: flex;
    }

    .article-card.list-view:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
    }

    .article-card .article-votes {
        width: 100px;
        flex-shrink: 0;
        background-color: var(--light-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--border-light);
        padding: 1rem;
    }

    .article-card .votes-count {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
    }

    .article-card .votes-label {
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-align: center;
    }

    .article-card .vote-btn {
        margin-top: 0.75rem;
        background-color: var(--primary);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        width: 100%;
    }

    .article-card .vote-btn:hover {
        background-color: var(--primary-dark);
    }

    .article-card .vote-btn.voted {
        background-color: var(--success);
    }

    .article-card .vote-btn.voted:hover {
        background-color: #059669;
    }

    .article-card .article-content {
        flex: 1;
        padding: 1.5rem;
        display: flex;
        gap: 1.5rem;
    }

    .article-card .article-image {
        width: 140px;
        height: 140px;
        border-radius: var(--radius);
        overflow: hidden;
        flex-shrink: 0;
    }

    .article-card .article-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-card .article-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .article-card .article-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        transition: var(--transition);
    }

    .article-card .article-title a {
        color: var(--text-primary);
        text-decoration: none;
    }

    .article-card .article-title a:hover {
        color: var(--primary);
    }

    .article-card .article-excerpt {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
    }

    .article-card .article-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    .article-card .article-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .article-card .author-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
    }

    .article-card .author-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-card .article-date {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* 网格视图样式 */
    .articles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .article-card.grid-view {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .article-card.grid-view:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-5px);
    }

    .article-card.grid-view .article-image {
        width: 100%;
        height: 180px;
        border-radius: 0;
    }

    .article-card.grid-view .article-content {
        flex-direction: column;
        padding: 1.25rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .article-card.grid-view .article-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .article-card.grid-view .article-excerpt {
        -webkit-line-clamp: 3;
        margin-bottom: 1rem;
        flex: 1;
    }

    .article-card.grid-view .article-votes-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid var(--border-light);
    }

    .article-card.grid-view .article-votes {
        width: auto;
        background-color: transparent;
        flex-direction: row;
        border-right: none;
        padding: 0;
        gap: 0.5rem;
    }

    .article-card.grid-view .vote-btn {
        margin-top: 0;
        width: auto;
    }

    /* 摘要视图样式 */
    .articles-summary {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .article-card.summary-view {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: var(--transition);
        padding: 1.5rem;
    }

    .article-card.summary-view:hover {
        box-shadow: var(--shadow-hover);
    }

    .article-card.summary-view .summary-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .article-card.summary-view .summary-title {
        flex: 1;
    }

    .article-card.summary-view .article-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .article-card.summary-view .summary-votes {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: 1rem;
    }

    .article-card.summary-view .article-votes {
        width: auto;
        background-color: transparent;
        flex-direction: row;
        border-right: none;
        padding: 0;
        gap: 0.5rem;
    }

    .article-card.summary-view .article-excerpt {
        -webkit-line-clamp: 3;
        margin-bottom: 1rem;
    }

    .article-card.summary-view .summary-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid var(--border-light);
    }

    /* 分页 */
    .pagination-container {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
    }

    .pagination-container .pagination {
        display: flex;
        gap: 0.5rem;
    }

    .pagination-container .page-btn {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--card-bg);
        border: 1px solid var(--border-light);
        color: var(--text-secondary);
        cursor: pointer;
        transition: var(--transition);
    }

    .pagination-container .page-btn:hover {
        border-color: var(--primary-light);
        color: var(--primary);
    }

    .pagination-container .page-btn.active {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .pagination-container .page-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 侧边栏 */
    .content-container .sidebar-card {
        background-color: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .content-container .sidebar-card .sidebar-title {
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    /* 倒计时 */
    .countdown {
        text-align: center;
        padding: 1rem;
        background-color: rgba(59, 130, 246, 0.1);
        border-radius: var(--radius);
        margin-bottom: 1.5rem;
    }

    .countdown-title {
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--primary-dark);
    }

    .countdown-timer {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
    }

    .countdown .timer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .countdown .timer-value {
        width: 50px;
        height: 50px;
        background-color: var(--primary);
        color: white;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .countdown .timer-label {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }

    /* 热门作者 */
    .top-authors {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .top-authors .author-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-light);
    }

    .top-authors .author-item:last-child {
        border-bottom: none;
    }

    .top-authors .author-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .top-authors .author-rank {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--primary-light);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .top-authors .author-rank.top1 {
        background-color: var(--warning);
    }

    .top-authors .author-rank.top2 {
        background-color: #94A3B8;
    }

    .top-authors .author-rank.top3 {
        background-color: #D97706;
    }

    .top-authors .author-name {
        font-weight: 500;
        font-size: 0.95rem;
    }

    .top-authors .author-articles {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .top-authors .author-votes {
        color: var(--primary);
        font-weight: 600;
        font-size: 0.9rem;
    }

    /* 参与按钮 */
    .btn-participate {
        background-color: var(--secondary);
        color: white;
        border: none;
        width: 100%;
        padding: 0.75rem;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        cursor: pointer;
        transition: var(--transition);
        margin-bottom: 1rem;
    }

    .btn-participate:hover {
        background-color: #DB2777;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    }

    /* 模态框样式 */
    .modal-content {
        border-radius: var(--radius);
        border: none;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .modal-content .modal-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    .modal-content .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .modal-content .modal-body {
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-content .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border-light);
        display: flex;
        gap: 1rem;
    }

    .modal-content .modal-footer .btn {
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius);
        font-weight: 500;
    }

    .modal-content .btn-close {
        background-color: transparent;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
    }

    .modal-content .btn-secondary {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-light);
    }

    .modal-content .btn-secondary:hover {
        background-color: var(--light-bg);
    }

    .modal-content .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
    }

    .modal-content .btn-primary:hover {
        background-color: var(--primary-dark);
    }

    /* 文章选择列表 */
    .my-articles-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .my-article-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        cursor: pointer;
        transition: var(--transition);
    }

    .my-article-item:hover {
        border-color: var(--primary-light);
        background-color: rgba(59, 130, 246, 0.03);
    }

    .my-article-item.selected {
        border-color: var(--primary);
        background-color: rgba(59, 130, 246, 0.05);
    }

    .my-article-item .article-checkbox {
        margin-right: 1rem;
    }

    .my-article-item .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .my-article-item .my-article-info {
        flex: 1;
    }

    .my-article-item .my-article-title {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .my-article-item .my-article-date {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    .my-article-item .no-articles {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--text-secondary);
    }

    .my-article-item .no-articles i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: var(--border-light);
    }

    .my-article-item .create-new-link {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

    .my-article-item .create-new-link:hover {
        text-decoration: underline;
    }

    /* 响应式调整 */
    @media (max-width: 992px) {
        .content-container {
            flex-direction: column;
        }

        .content-container .sidebar {
            width: 100%;
        }

        .content-container .sidebar-cards-container {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .content-container .sidebar-card {
            flex: 1;
            min-width: 280px;
        }
    }

    @media (max-width: 768px) {
        .event-banner {
            padding: 1.5rem;
        }

        .content-container .event-title {
            font-size: 1.75rem;
        }

        .content-container .event-actions {
            flex-wrap: wrap;
        }

        .article-card.list-view {
            flex-direction: column;
        }

        .article-card .article-votes {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid var(--border-light);
            flex-direction: row;
            gap: 1rem;
            padding: 0.75rem 1rem;
        }

        .article-card .vote-btn {
            margin-top: 0;
            width: auto;
        }

        .article-card .article-content {
            flex-direction: column;
            padding: 1rem;
        }

        .article-card .article-image {
            width: 100%;
            height: 180px;
        }

        .articles-filter .search-input {
            width: 160px;
        }

        .articles-filter .filter-controls {
            flex-wrap: wrap;
        }

        .article-card.summary-view .summary-header {
            flex-direction: column;
        }

        .article-card.summary-view .summary-votes {
            margin-left: 0;
            margin-top: 1rem;
            align-self: flex-start;
        }
    }

    @media (max-width: 576px) {
        .event-banner .event-meta {
            gap: 1rem;
        }

        .articles-filter .filter-controls {
            flex-direction: column;
            width: 100%;
        }

        .articles-filter .search-input {
            width: 100%;
        }

        .article-card .article-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .countdown .timer-value {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }

        .article-card.summary-view .summary-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
    }
</style>

<div class="container py-5 px-4">
    <!-- 导航路径 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">科技前沿论坛</a></li>
            <li class="breadcrumb-item"><a href="#">活动中心</a></li>
            <li class="breadcrumb-item active" aria-current="page">2023年度最佳科技文章评选</li>
        </ol>
    </nav>

    <!-- 活动头部横幅 -->
    <div class="event-banner">
        <div class="event-banner-content">
            <span class="event-status">正在进行中</span>
            <h1 class="event-title">2023年度最佳科技文章评选</h1>
            <div class="event-meta">
                <div class="meta-item">
                    <i class="far fa-calendar-alt"></i>
                    <span>2023-11-01 至 2023-11-30</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-user"></i>
                    <span>主办方: 科技前沿论坛</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-file-alt"></i>
                    <span>参与文章: 128 篇</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-users"></i>
                    <span>参与用户: 3.2k</span>
                </div>
            </div>
            <div class="event-actions">
                <button class="btn-participate" data-bs-toggle="modal" data-bs-target="#participateModal">
                    <i class="fas fa-plus-circle"></i>
                    <span>参与投票活动</span>
                </button>
                <button class="btn btn-light text-primary">
                    <i class="fas fa-share-alt"></i>
                    <span>分享活动</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="content-container">
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 活动详情 -->
            <div class="event-card">
                <h2 class="card-title">活动详情</h2>
                <div class="event-description">
                    <p>2023年度最佳科技文章评选活动旨在表彰本年度在科技前沿论坛发布的优秀原创文章，鼓励更多高质量的科技内容创作与分享。</p>

                    <h4>活动规则</h4>
                    <p>1. 参与文章必须为2023年1月1日至2023年10月31日期间在本论坛发布的原创科技类文章；</p>
                    <p>2. 每位用户可提交1-3篇符合要求的原创文章参与评选；</p>
                    <p>3. 投票期为2023年11月1日至2023年11月30日，每位用户每天可为不同的3篇文章投票；</p>
                    <p>4. 最终将根据文章获得的总票数评选出各类奖项。</p>

                    <h4>评选标准</h4>
                    <p>1. 内容质量：科学性、原创性、深度与启发性；</p>
                    <p>2. 影响力：社区反馈、讨论热度、传播范围；</p>
                    <p>3. 专业性：技术准确性、专业术语使用规范；</p>
                    <p>4. 投票结果：公众投票占比60%，专家评审占比40%。</p>
                </div>

                <h2 class="card-title">奖项设置</h2>
                <ul class="reward-list">
                    <li class="reward-item">
                        <div class="reward-rank first">1</div>
                        <div class="reward-details">
                            <h4 class="reward-title">年度最佳科技文章</h4>
                            <p class="reward-description">奖金 ¥5000 + 论坛年度会员 + 实体荣誉证书</p>
                        </div>
                    </li>
                    <li class="reward-item">
                        <div class="reward-rank second">2</div>
                        <div class="reward-details">
                            <h4 class="reward-title">年度优秀科技文章</h4>
                            <p class="reward-description">奖金 ¥3000 + 论坛半年会员 + 实体荣誉证书</p>
                        </div>
                    </li>
                    <li class="reward-item">
                        <div class="reward-rank third">3</div>
                        <div class="reward-details">
                            <h4 class="reward-title">年度推荐科技文章</h4>
                            <p class="reward-description">奖金 ¥1000 + 论坛季度会员 + 实体荣誉证书</p>
                        </div>
                    </li>
                    <li class="reward-item">
                        <div class="reward-rank">4-10</div>
                        <div class="reward-details">
                            <h4 class="reward-title">年度入围科技文章</h4>
                            <p class="reward-description">论坛月度会员 + 电子荣誉证书</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 文章筛选 -->
            <div class="articles-filter">
                <h3 class="filter-title">参与文章列表 <span class="text-secondary"
                                                      style="font-weight: normal; font-size: 0.9rem;">(128篇)</span></h3>
                <div class="filter-controls">
                    <div class="view-controls">
                        <button class="view-btn active" data-view="list" title="列表视图">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="view-btn" data-view="grid" title="网格视图">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="view-btn" data-view="summary" title="摘要视图">
                            <i class="fas fa-align-left"></i>
                        </button>
                    </div>
                    <select class="sort-select">
                        <option value="votes">按票数排序</option>
                        <option value="latest">最新参与</option>
                        <option value="popular">按热度排序</option>
                    </select>
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索文章...">
                    </div>
                </div>
            </div>

            <!-- 文章展示容器 -->
            <div class="articles-container">
                <!-- 列表视图 -->
                <div class="articles-list" id="list-view">
                    <!-- 文章1 -->
                    <div class="article-card list-view" data-id="art1">
                        <div class="article-votes">
                            <div class="votes-count">528</div>
                            <div class="votes-label">获得票数</div>
                            <button class="vote-btn">
                                <i class="fas fa-vote-yea"></i> 投票
                            </button>
                        </div>
                        <div class="article-content">
                            <div class="article-image">
                                <img src="https://picsum.photos/id/1/300/300" alt="人工智能与未来医疗">
                            </div>
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">人工智能与未来医疗：从诊断到治疗的全流程变革</a>
                                </h3>
                                <div class="article-excerpt">
                                    本文深入探讨了人工智能技术在医疗领域的应用现状与未来趋势，分析了AI如何从疾病诊断、治疗方案制定到康复跟踪的全流程中发挥作用，以及面临的技术和伦理挑战。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/64/100/100" alt="科技探索者">
                                        </div>
                                        <span>科技探索者</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-09-15</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文章2 -->
                    <div class="article-card list-view" data-id="art2">
                        <div class="article-votes">
                            <div class="votes-count">486</div>
                            <div class="votes-label">获得票数</div>
                            <button class="vote-btn voted">
                                <i class="fas fa-check"></i> 已投票
                            </button>
                        </div>
                        <div class="article-content">
                            <div class="article-image">
                                <img src="https://picsum.photos/id/2/300/300" alt="量子计算的突破">
                            </div>
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">量子计算的突破性进展：从实验室到实际应用</a>
                                </h3>
                                <div class="article-excerpt">
                                    量子计算作为下一代计算技术的核心，近年来取得了多项突破性进展。本文详细介绍了量子计算的基本原理、最新研究成果以及在密码学、材料科学等领域的潜在应用。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/338/100/100" alt="量子计算">
                                        </div>
                                        <span>量子计算</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-08-22</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文章3 -->
                    <div class="article-card list-view" data-id="art3">
                        <div class="article-votes">
                            <div class="votes-count">392</div>
                            <div class="votes-label">获得票数</div>
                            <button class="vote-btn">
                                <i class="fas fa-vote-yea"></i> 投票
                            </button>
                        </div>
                        <div class="article-content">
                            <div class="article-image">
                                <img src="https://picsum.photos/id/3/300/300" alt="区块链技术">
                            </div>
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">区块链技术在供应链管理中的创新应用与实践</a>
                                </h3>
                                <div class="article-excerpt">
                                    区块链技术的去中心化、不可篡改特性为供应链管理带来了革命性的变革。本文结合多个行业案例，分析了区块链如何提高供应链的透明度、效率和安全性。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/349/100/100" alt="未来网络">
                                        </div>
                                        <span>未来网络</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-10-05</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 网格视图 -->
                <div class="articles-grid" id="grid-view" style="display: none;">
                    <!-- 文章1 -->
                    <div class="article-card grid-view" data-id="art1">
                        <div class="article-image">
                            <img src="https://picsum.photos/id/1/300/300" alt="人工智能与未来医疗">
                        </div>
                        <div class="article-content">
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">人工智能与未来医疗：从诊断到治疗的全流程变革</a>
                                </h3>
                                <div class="article-excerpt">
                                    本文深入探讨了人工智能技术在医疗领域的应用现状与未来趋势，分析了AI如何从疾病诊断、治疗方案制定到康复跟踪的全流程中发挥作用，以及面临的技术和伦理挑战。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/64/100/100" alt="科技探索者">
                                        </div>
                                        <span>科技探索者</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-09-15</span>
                                    </div>
                                </div>
                                <div class="article-votes-container">
                                    <div class="article-votes">
                                        <div class="votes-count">528</div>
                                        <div class="votes-label">票</div>
                                    </div>
                                    <button class="vote-btn">
                                        <i class="fas fa-vote-yea"></i> 投票
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文章2 -->
                    <div class="article-card grid-view" data-id="art2">
                        <div class="article-image">
                            <img src="https://picsum.photos/id/2/300/300" alt="量子计算的突破">
                        </div>
                        <div class="article-content">
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">量子计算的突破性进展：从实验室到实际应用</a>
                                </h3>
                                <div class="article-excerpt">
                                    量子计算作为下一代计算技术的核心，近年来取得了多项突破性进展。本文详细介绍了量子计算的基本原理、最新研究成果以及在密码学、材料科学等领域的潜在应用。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/338/100/100" alt="量子计算">
                                        </div>
                                        <span>量子计算</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-08-22</span>
                                    </div>
                                </div>
                                <div class="article-votes-container">
                                    <div class="article-votes">
                                        <div class="votes-count">486</div>
                                        <div class="votes-label">票</div>
                                    </div>
                                    <button class="vote-btn voted">
                                        <i class="fas fa-check"></i> 已投票
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文章3 -->
                    <div class="article-card grid-view" data-id="art3">
                        <div class="article-image">
                            <img src="https://picsum.photos/id/3/300/300" alt="区块链技术">
                        </div>
                        <div class="article-content">
                            <div class="article-info">
                                <h3 class="article-title">
                                    <a href="#">区块链技术在供应链管理中的创新应用与实践</a>
                                </h3>
                                <div class="article-excerpt">
                                    区块链技术的去中心化、不可篡改特性为供应链管理带来了革命性的变革。本文结合多个行业案例，分析了区块链如何提高供应链的透明度、效率和安全性。
                                </div>
                                <div class="article-meta">
                                    <div class="article-author">
                                        <div class="author-avatar">
                                            <img src="https://picsum.photos/id/349/100/100" alt="未来网络">
                                        </div>
                                        <span>未来网络</span>
                                    </div>
                                    <div class="article-date">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-10-05</span>
                                    </div>
                                </div>
                                <div class="article-votes-container">
                                    <div class="article-votes">
                                        <div class="votes-count">392</div>
                                        <div class="votes-label">票</div>
                                    </div>
                                    <button class="vote-btn">
                                        <i class="fas fa-vote-yea"></i> 投票
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 摘要视图 -->
                <div class="articles-summary" id="summary-view" style="display: none;">
                    <!-- 文章1 -->
                    <div class="article-card summary-view" data-id="art1">
                        <div class="summary-header">
                            <div class="summary-title">
                                <h3 class="article-title">
                                    <a href="#">人工智能与未来医疗：从诊断到治疗的全流程变革</a>
                                </h3>
                                <div class="article-author">
                                    <div class="author-avatar">
                                        <img src="https://picsum.photos/id/64/100/100" alt="科技探索者">
                                    </div>
                                    <span>科技探索者</span> ·
                                    <span class="article-date">
                                            <i class="far fa-calendar"></i> 2023-09-15
                                        </span>
                                </div>
                            </div>
                            <div class="summary-votes">
                                <div class="article-votes">
                                    <div class="votes-count">528</div>
                                    <div class="votes-label">票</div>
                                </div>
                                <button class="vote-btn">
                                    <i class="fas fa-vote-yea"></i> 投票
                                </button>
                            </div>
                        </div>
                        <div class="article-excerpt">
                            本文深入探讨了人工智能技术在医疗领域的应用现状与未来趋势，分析了AI如何从疾病诊断、治疗方案制定到康复跟踪的全流程中发挥作用，以及面临的技术和伦理挑战。人工智能在医学影像识别、药物研发、个性化治疗等方面的应用已经取得了显著进展，但同时也面临着数据隐私、算法透明度和监管等方面的挑战。本文还探讨了未来AI与医疗融合的可能路径和发展方向。
                        </div>
                        <div class="summary-footer">
                            <div>
                                <span class="badge bg-primary-light text-primary">人工智能</span>
                                <span class="badge bg-primary-light text-primary">医疗健康</span>
                                <span class="badge bg-primary-light text-primary">技术趋势</span>
                            </div>
                            <div>
                                <i class="far fa-comment"></i> 128 条评论
                            </div>
                        </div>
                    </div>

                    <!-- 文章2 -->
                    <div class="article-card summary-view" data-id="art2">
                        <div class="summary-header">
                            <div class="summary-title">
                                <h3 class="article-title">
                                    <a href="#">量子计算的突破性进展：从实验室到实际应用</a>
                                </h3>
                                <div class="article-author">
                                    <div class="author-avatar">
                                        <img src="https://picsum.photos/id/338/100/100" alt="量子计算">
                                    </div>
                                    <span>量子计算</span> ·
                                    <span class="article-date">
                                            <i class="far fa-calendar"></i> 2023-08-22
                                        </span>
                                </div>
                            </div>
                            <div class="summary-votes">
                                <div class="article-votes">
                                    <div class="votes-count">486</div>
                                    <div class="votes-label">票</div>
                                </div>
                                <button class="vote-btn voted">
                                    <i class="fas fa-check"></i> 已投票
                                </button>
                            </div>
                        </div>
                        <div class="article-excerpt">
                            量子计算作为下一代计算技术的核心，近年来取得了多项突破性进展。本文详细介绍了量子计算的基本原理、最新研究成果以及在密码学、材料科学等领域的潜在应用。从谷歌的"悬铃木"到IBM的量子处理器，量子计算的发展正在加速。文章还分析了量子计算面临的主要挑战，包括量子退相干、错误校正和算法开发等，并展望了量子计算商业化的时间表和可能路径。
                        </div>
                        <div class="summary-footer">
                            <div>
                                <span class="badge bg-primary-light text-primary">量子计算</span>
                                <span class="badge bg-primary-light text-primary">计算机科学</span>
                                <span class="badge bg-primary-light text-primary">技术突破</span>
                            </div>
                            <div>
                                <i class="far fa-comment"></i> 96 条评论
                            </div>
                        </div>
                    </div>

                    <!-- 文章3 -->
                    <div class="article-card summary-view" data-id="art3">
                        <div class="summary-header">
                            <div class="summary-title">
                                <h3 class="article-title">
                                    <a href="#">区块链技术在供应链管理中的创新应用与实践</a>
                                </h3>
                                <div class="article-author">
                                    <div class="author-avatar">
                                        <img src="https://picsum.photos/id/349/100/100" alt="未来网络">
                                    </div>
                                    <span>未来网络</span> ·
                                    <span class="article-date">
                                            <i class="far fa-calendar"></i> 2023-10-05
                                        </span>
                                </div>
                            </div>
                            <div class="summary-votes">
                                <div class="article-votes">
                                    <div class="votes-count">392</div>
                                    <div class="votes-label">票</div>
                                </div>
                                <button class="vote-btn">
                                    <i class="fas fa-vote-yea"></i> 投票
                                </button>
                            </div>
                        </div>
                        <div class="article-excerpt">
                            区块链技术的去中心化、不可篡改特性为供应链管理带来了革命性的变革。本文结合多个行业案例，分析了区块链如何提高供应链的透明度、效率和安全性。从食品溯源到奢侈品防伪，从物流跟踪到跨境贸易，区块链技术正在各个领域展示其价值。文章还探讨了企业实施区块链供应链解决方案面临的挑战和最佳实践，以及未来区块链与物联网、人工智能等技术融合的发展趋势。
                        </div>
                        <div class="summary-footer">
                            <div>
                                <span class="badge bg-primary-light text-primary">区块链</span>
                                <span class="badge bg-primary-light text-primary">供应链</span>
                                <span class="badge bg-primary-light text-primary">企业应用</span>
                            </div>
                            <div>
                                <i class="far fa-comment"></i> 78 条评论
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination">
                    <div class="page-btn disabled">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="page-btn active">1</div>
                    <div class="page-btn">2</div>
                    <div class="page-btn">3</div>
                    <div class="page-btn">4</div>
                    <div class="page-btn">5</div>
                    <div class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-cards-container">
                <!-- 倒计时 -->
                <div class="sidebar-card">
                    <h3 class="sidebar-title">活动倒计时</h3>
                    <div class="countdown">
                        <h4 class="countdown-title">距离投票结束还有</h4>
                        <div class="countdown-timer">
                            <div class="timer-item">
                                <div class="timer-value" id="days">15</div>
                                <div class="timer-label">天</div>
                            </div>
                            <div class="timer-item">
                                <div class="timer-value" id="hours">08</div>
                                <div class="timer-label">时</div>
                            </div>
                            <div class="timer-item">
                                <div class="timer-value" id="minutes">45</div>
                                <div class="timer-label">分</div>
                            </div>
                            <div class="timer-item">
                                <div class="timer-value" id="seconds">33</div>
                                <div class="timer-label">秒</div>
                            </div>
                        </div>
                    </div>
                    <button class="btn-participate" data-bs-toggle="modal" data-bs-target="#participateModal">
                        <i class="fas fa-plus-circle"></i>
                        <span>参与投票活动</span>
                    </button>
                </div>

                <!-- 热门作者 -->
                <div class="sidebar-card">
                    <h3 class="sidebar-title">热门作者</h3>
                    <ul class="top-authors">
                        <li class="author-item">
                            <div class="author-info">
                                <div class="author-rank top1">1</div>
                                <div>
                                    <div class="author-name">科技探索者</div>
                                    <div class="author-articles">3篇文章 · 平均428票</div>
                                </div>
                            </div>
                            <div class="author-votes">1284票</div>
                        </li>
                        <li class="author-item">
                            <div class="author-info">
                                <div class="author-rank top2">2</div>
                                <div>
                                    <div class="author-name">量子计算</div>
                                    <div class="author-articles">2篇文章 · 平均396票</div>
                                </div>
                            </div>
                            <div class="author-votes">792票</div>
                        </li>
                        <li class="author-item">
                            <div class="author-info">
                                <div class="author-rank top3">3</div>
                                <div>
                                    <div class="author-name">未来网络</div>
                                    <div class="author-articles">4篇文章 · 平均278票</div>
                                </div>
                            </div>
                            <div class="author-votes">1112票</div>
                        </li>
                        <li class="author-item">
                            <div class="author-info">
                                <div class="author-rank">4</div>
                                <div>
                                    <div class="author-name">智能生活</div>
                                    <div class="author-articles">2篇文章 · 平均256票</div>
                                </div>
                            </div>
                            <div class="author-votes">512票</div>
                        </li>
                        <li class="author-item">
                            <div class="author-info">
                                <div class="author-rank">5</div>
                                <div>
                                    <div class="author-name">科技先锋</div>
                                    <div class="author-articles">3篇文章 · 平均189票</div>
                                </div>
                            </div>
                            <div class="author-votes">567票</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 参与活动模态框 -->
<div class="modal fade" id="participateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择文章参与投票活动</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p style="margin-bottom: 1.5rem; color: var(--text-secondary);">
                    请选择您在2023年1月1日至2023年10月31日期间发布的原创科技类文章，最多可选择3篇参与本次评选。</p>

                <div class="my-articles-list">
                    <div class="my-article-item selected">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox" checked>
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">人工智能在医疗影像诊断中的应用与挑战</div>
                            <div class="my-article-date">发布于 2023-09-10</div>
                        </div>
                    </div>

                    <div class="my-article-item selected">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox" checked>
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">深度学习模型的优化方法与实践指南</div>
                            <div class="my-article-date">发布于 2023-07-25</div>
                        </div>
                    </div>

                    <div class="my-article-item">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox">
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">大语言模型的发展历程与未来趋势</div>
                            <div class="my-article-date">发布于 2023-10-05</div>
                        </div>
                    </div>

                    <div class="my-article-item">
                        <div class="form-check article-checkbox">
                            <input class="form-check-input" type="checkbox">
                        </div>
                        <div class="my-article-info">
                            <div class="my-article-title">计算机视觉技术在自动驾驶中的应用</div>
                            <div class="my-article-date">发布于 2023-06-18</div>
                        </div>
                    </div>
                </div>

                <!-- 如果没有文章可选择，显示以下内容 -->
                <!-- <div class="no-articles">
                    <i class="far fa-file-alt"></i>
                    <h4>您暂无符合条件的文章</h4>
                    <p>请发布符合要求的原创科技类文章后再参与活动</p>
                    <a href="#" class="create-new-link">
                        <i class="fas fa-plus-circle"></i> 发布新文章
                    </a>
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitArticles">确认提交</button>
            </div>
        </div>
    </div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 视图切换功能
		const viewButtons = document.querySelectorAll('.view-btn');
		const views = {
			list: document.getElementById('list-view'),
			grid: document.getElementById('grid-view'),
			summary: document.getElementById('summary-view')
		};

		viewButtons.forEach(button => {
			button.addEventListener('click', function () {
				// 更新按钮状态
				viewButtons.forEach(btn => btn.classList.remove('active'));
				this.classList.add('active');

				// 显示选中的视图，隐藏其他视图
				const viewType = this.getAttribute('data-view');
				for (const key in views) {
					views[key].style.display = key === viewType ? 'flex' : 'none';
				}

				// 模拟AJAX记录用户偏好
				simulateAjax({
					url: '/api/user-preferences',
					method: 'POST',
					data: {
						preference: 'article_view',
						value: viewType
					},
					success: function (response) {
						console.log(`已将视图偏好设置为${viewType}`, response);
					}
				});
			});
		});

		// 倒计时功能
		function updateCountdown() {
			// 目标日期：2023年11月30日
			const targetDate = new Date('2023-11-30T23:59:59');
			const now = new Date();
			const diff = targetDate - now;

			if (diff <= 0) {
				document.getElementById('days').textContent = '00';
				document.getElementById('hours').textContent = '00';
				document.getElementById('minutes').textContent = '00';
				document.getElementById('seconds').textContent = '00';
				return;
			}

			const days = Math.floor(diff / (1000 * 60 * 60 * 24));
			const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((diff % (1000 * 60)) / 1000);

			document.getElementById('days').textContent = days.toString().padStart(2, '0');
			document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
			document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
			document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
		}

		// 初始化倒计时
		updateCountdown();
		// 每秒更新一次
		setInterval(updateCountdown, 1000);

		// 投票功能
		const voteButtons = document.querySelectorAll('.vote-btn:not(.voted)');
		voteButtons.forEach(button => {
			button.addEventListener('click', function () {
				const articleCard = this.closest('.article-card');
				const votesCount = articleCard.querySelector('.votes-count');
				const currentVotes = parseInt(votesCount.textContent);

				// 更新票数
				votesCount.textContent = currentVotes + 1;

				// 更改按钮状态
				this.classList.add('voted');
				this.innerHTML = '<i class="fas fa-check"></i> 已投票';

				// 模拟AJAX请求
				simulateAjax({
					url: '/api/vote',
					method: 'POST',
					data: {
						articleId: articleCard.dataset.id || Math.random().toString(36).substr(2, 9),
						userId: 'current_user_id'
					},
					success: function (response) {
						console.log('投票成功:', response);
					}
				});
			});
		});

		// 文章选择功能
		const articleItems = document.querySelectorAll('.my-article-item');
		articleItems.forEach(item => {
			const checkbox = item.querySelector('.form-check-input');

			item.addEventListener('click', function (e) {
				// 如果点击的是复选框本身，则不处理，避免重复触发
				if (e.target === checkbox) return;

				checkbox.checked = !checkbox.checked;
				updateArticleSelection();
			});

			checkbox.addEventListener('change', updateArticleSelection);
		});

		// 更新文章选择状态
		function updateArticleSelection() {
			const checkboxes = document.querySelectorAll('.my-article-item .form-check-input:checked');
			const articleItems = document.querySelectorAll('.my-article-item');

			// 更新选中状态样式
			articleItems.forEach(item => {
				const checkbox = item.querySelector('.form-check-input');
				if (checkbox.checked) {
					item.classList.add('selected');
				} else {
					item.classList.remove('selected');
				}
			});

			// 限制最多选择3篇文章
			if (checkboxes.length >= 3) {
				const uncheckedCheckboxes = document.querySelectorAll('.my-article-item .form-check-input:not(:checked)');
				uncheckedCheckboxes.forEach(checkbox => {
					checkbox.disabled = true;
				});
			} else {
				const allCheckboxes = document.querySelectorAll('.my-article-item .form-check-input');
				allCheckboxes.forEach(checkbox => {
					checkbox.disabled = false;
				});
			}
		}

		// 提交文章参与活动
		document.getElementById('submitArticles').addEventListener('click', function () {
			const checkboxes = document.querySelectorAll('.my-article-item .form-check-input:checked');

			if (checkboxes.length === 0) {
				alert('请至少选择一篇文章参与活动');
				return;
			}

			// 收集选中的文章ID
			const selectedArticles = [];
			checkboxes.forEach(checkbox => {
				const articleItem = checkbox.closest('.my-article-item');
				const articleTitle = articleItem.querySelector('.my-article-title').textContent;
				// 在实际应用中，这里应该获取文章的ID
				selectedArticles.push({
					id: Math.random().toString(36).substr(2, 9),
					title: articleTitle
				});
			});

			// 模拟AJAX提交
			simulateAjax({
				url: '/api/participate',
				method: 'POST',
				data: {
					eventId: '2023_best_tech_article',
					userId: 'current_user_id',
					articles: selectedArticles.map(article => article.id)
				},
				success: function (response) {
					console.log('提交成功:', response);

					// 关闭模态框
					const modal = bootstrap.Modal.getInstance(document.getElementById('participateModal'));
					modal.hide();

					// 显示成功消息
					alert(`成功提交 ${selectedArticles.length} 篇文章参与活动！`);
				},
				error: function (error) {
					console.error('提交失败:', error);
					alert('提交失败，请稍后重试');
				}
			});
		});

		// 分页功能
		const pageBtns = document.querySelectorAll('.page-btn:not(.disabled)');
		pageBtns.forEach(btn => {
			if (!btn.querySelector('i')) { // 不是箭头按钮
				btn.addEventListener('click', function () {
					pageBtns.forEach(b => b.classList.remove('active'));
					this.classList.add('active');

					// 模拟加载新页面内容
					simulateAjax({
						url: '/api/articles',
						method: 'GET',
						data: {
							page: this.textContent,
							sort: document.querySelector('.sort-select').value,
							view: document.querySelector('.view-btn.active').getAttribute('data-view')
						},
						success: function (response) {
							console.log(`加载第${this.textContent}页内容成功`, response);
							// 在实际应用中，这里会更新文章列表
						}
					});
				})
			}
		});

		// 搜索功能
		const searchInput = document.querySelector('.search-input');
		searchInput.addEventListener('keyup', function (e) {
			// 按Enter键搜索
			if (e.key === 'Enter') {
				const searchTerm = this.value.trim();
				if (searchTerm) {
					// 模拟搜索请求
					simulateAjax({
						url: '/api/search',
						method: 'GET',
						data: {
							query: searchTerm,
							view: document.querySelector('.view-btn.active').getAttribute('data-view')
						},
						success: function (response) {
							console.log(`搜索"${searchTerm}"成功`, response);
							// 在实际应用中，这里会更新文章列表
						}
					});
				}
			}
		});

		// 排序功能
		const sortSelect = document.querySelector('.sort-select');
		sortSelect.addEventListener('change', function () {
			// 模拟排序请求
			simulateAjax({
				url: '/api/articles',
				method: 'GET',
				data: {
					sort: this.value,
					page: 1,
					view: document.querySelector('.view-btn.active').getAttribute('data-view')
				},
				success: function (response) {
					console.log(`按${this.value}排序成功`, response);
					// 在实际应用中，这里会更新文章列表
				}
			});
		});

		// 模拟AJAX请求的函数
		function simulateAjax(options) {
			console.log('发送AJAX请求:', options);

			// 模拟网络延迟
			setTimeout(() => {
				if (options.success) {
					options.success({
						status: 'success',
						message: '操作成功',
						data: {
							timestamp: new Date().getTime()
						}
					});
				}
			}, 800);
		}
	});
</script>

    
